<?php 
    $custId = Mage::getSingleton('customer/session')->getCustomer()->getId();
    $passportData = $this->getPassportData($custId);
    $saveUrl = $this->getUrl('passport/customer/save');
?>


<div class="page-title">
    <h1><?php echo $this->__('Passport Information') ?></h1>
	<span style="color:#e33e3e;font-size:10px;"><?php echo $this->__('Please filled in your full name.*');?> </span>
</div>
<?php echo $this->getMessagesBlock()->toHtml() ?>
<form name="passport" action="<?php echo $saveUrl ?>" method="post" id="passport_validate" autocomplete="off">
    <div>
        <ul class="form-list">
            <li class="fields">
                <input type="hidden" name="cust_id" value="<?php echo $custId; ?>" style="width:200px;" />
            </li>
            <li class="fields">
                <label class="required"><em>*</em><?php echo $this->__('Passport Number') ?></label>
                <div class="input-box">
                    <input type="text" name="passport_no" id="PassportNo" class="input-text required-entry" value="<?php echo empty($passportData['PassportNo'])?'':$passportData['PassportNo']; ?>" style="width:200px;" />
                </div>
            </li>

            <li class="fields">
                <label class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
                <div class="input-box">
                    <input type="text" name="frist_name" id="FirstName" class="input-text required-entry" value="<?php echo empty($passportData['FirstName'])?'':$passportData['FirstName']; ?>" style="width:200px;" />
                </div>
            </li>

            <li class="fields">
            	<label><?php echo $this->__('Middle Name') ?></label>
                <div class="input-box">
                    <input type="text" name="middle_name" id="MiddleName" class="input-text" value="<?php echo empty($passportData['MiddleName'])?'':$passportData['MiddleName']; ?>" style="width:200px;" />
                </div>
				<span style="color:#e33e3e;font-size:10px;"><?php echo $this->__("Field 'Middle Name' can be empty only in case, if it is blank in your passport.*");?></span>
            </li>

            <li class="fields">
                <label class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
                <div class="input-box">
                    <input type="text" name="last_name" id="LastName" class="input-text required-entry" value="<?php echo empty($passportData['LastName'])?'':$passportData['LastName']; ?>" style="width:200px;" />
                </div>
            </li>

            <li class="fields">
                <label class="required"><em>*</em><?php echo $this->__('Issue Date') ?></label>
                <div class="input-box required-entry">
					<input type="text" name="issue_date" id="issue_date" readonly="readonly" class="input-text required-entry" value="<?php echo empty($passportData['IssueDate'])?'':$passportData['IssueDate']; ?>" style="width:100px;" />
					<img src="<?php echo $this->getUrl('skin').'adminhtml/default/default/images/grid-cal.gif' ?>" id="issue_date_trig" />
                </div>
            </li>
            
             <li class="fields">
              	  <div class="input-box required-entry">
					<input type="checkbox" name="is_agree" id="is_agree" class="input-checkbox required-entry"  <?php echo  empty($passportData) ? '' : 'checked = "checked"' ; ?> />
						<span><?php echo $this->__('I have read and accept terms of the ') ?><a href="javascript:void(0);" onclick="EV_modeAlert('dpdagreement')" style="text-decoration: underline;"><?php echo $this->__('customs clearance agreement') ?></a></span>
                		<a href="javascript:EV_closeAlert()" id="closeButton" style="position:fixed;top:110px;left:1095px;z-index:10002;display:none;"><img src="<?php echo $this->getSkinUrl('images/closelabel.png')?>"></a>
                		<div id="dpdagreement" style=" width:1000px; height:700px; background-color:#FFFFFF; border:1px solid #a1a1a1; padding:20px; overflow:auto; display:none;">   
                        	<div><?php echo Mage::app()->getLayout()->createBlock('cms/block')->setBlockId('dpd-agreemen')->toHtml(); ?></div>  
            			</div>
                	</div>
                </li>
        </ul>
    </div>
    <div class="buttons-set">
        <p class="back-link"><a href="<?php echo $this->getBackUrl() ?>"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
        <button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
        <p class="required"><?php echo $this->__('* Required Fields') ?></p>
    </div>
    <a href="<?php echo $this->getUrl(). 'delivery' ?>" target="_blank" style="text-decoration:underline;"><?php echo $this->__('Why do I need to provide my passport details?')?></a>
    <div class="passport_notice"><?php echo $this->__('The Russian Federal Customs Service requires personal information or personal information of recipient including full name, passport number and date of passport issue for all express shipments intended for personal use. Please note your Personal Data will be transferred to our logistics partners, and not be saved on servers of Rumall.')?></div>
</form>

<script type="text/javascript">
//<![CDATA[
    var dataForm = new VarienForm('passport_validate', true);
//]]>
</script>

<script type="text/javascript">
    //<![CDATA[
    //用来记录要显示的DIV的ID值
    var EV_MsgBox_ID=""; //重要

    //弹出对话窗口(msgID-要显示的div的id)
    function EV_modeAlert(msgID){
    	//创建大大的背景框
    	var bgObj=document.createElement("div");
    	bgObj.setAttribute('id','EV_bgModeAlertDiv');
    	document.body.appendChild(bgObj);
    	//背景框满窗口显示
    	EV_Show_bgDiv();
    	//把要显示的div居中显示
    	EV_MsgBox_ID=msgID;
    	EV_Show_msgDiv();
    }

    //关闭对话窗口
    function EV_closeAlert(){
    	var msgObj=document.getElementById(EV_MsgBox_ID);
    	var closeButton=document.getElementById('closeButton');
    	var bgObj=document.getElementById("EV_bgModeAlertDiv");
    	msgObj.style.display="none";
    	closeButton.style.display="none";
    	document.body.removeChild(bgObj);
    	EV_MsgBox_ID="";
    }

    //窗口大小改变时更正显示大小和位置
    window.onresize=function(){
    	if (EV_MsgBox_ID.length>0){
    		EV_Show_bgDiv();
    		EV_Show_msgDiv();
    	}
    }

    //窗口滚动条拖动时更正显示大小和位置
    window.onscroll=function(){
    	if (EV_MsgBox_ID.length>0){
    		EV_Show_bgDiv();
    		EV_Show_msgDiv();
    	}
    }

    //把要显示的div居中显示
    function EV_Show_msgDiv(){
    	var msgObj   = document.getElementById(EV_MsgBox_ID);
    	var closeButton=document.getElementById('closeButton');
    	msgObj.style.display  = "block";
    	closeButton.style.display  = "block";
    	var msgWidth = msgObj.scrollWidth;
    	var msgHeight= msgObj.scrollHeight;
    	var bgTop=EV_myScrollTop();
    	var bgLeft=EV_myScrollLeft();
    	var bgWidth=EV_myClientWidth();
    	var bgHeight=EV_myClientHeight();
    	var msgTop=100;
    	var msgLeft=bgLeft+Math.round((bgWidth-msgWidth)/2);
    	msgObj.style.position = "fixed";
    	msgObj.style.top      = msgTop+"px";
    	msgObj.style.left     = msgLeft+"px";
    	msgObj.style.zIndex   = "10001";
    	
    }
    //背景框满窗口显示
    function EV_Show_bgDiv(){
    	var bgObj=document.getElementById("EV_bgModeAlertDiv");
    	var bgWidth=EV_myClientWidth();
    	var bgHeight=EV_myClientHeight();
    	var bgTop=EV_myScrollTop();
    	var bgLeft=EV_myScrollLeft();
    	bgObj.style.position   = "absolute";
    	bgObj.style.top        = bgTop+"px";
    	bgObj.style.left       = bgLeft+"px";
    	bgObj.style.width      = bgWidth + "px";
    	bgObj.style.height     = bgHeight + "px";
    	bgObj.style.zIndex     = "10000";
    	bgObj.style.background = "#777";
    	bgObj.style.filter     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";
    	bgObj.style.opacity    = "0.6";
    }
    //网页被卷去的上高度
    function EV_myScrollTop(){
    	var n=window.pageYOffset 
    	|| document.documentElement.scrollTop 
    	|| document.body.scrollTop || 0;
    	return n;
    }
    //网页被卷去的左宽度
    function EV_myScrollLeft(){
    	var n=window.pageXOffset 
    	|| document.documentElement.scrollLeft 
    	|| document.body.scrollLeft || 0;
    	return n;
    }
    //网页可见区域宽
    function EV_myClientWidth(){
    	var n=document.documentElement.clientWidth 
    	|| document.body.clientWidth || 0;
    	return n;
    }
    //网页可见区域高
    function EV_myClientHeight(){
    	var n=document.documentElement.clientHeight 
    	|| document.body.clientHeight || 0;
    	return n;
    }
    //]]>
    </script>
    
<script type="text/javascript">

//<![CDATA[
window.onload=function()
{
	enUS = {"m":{"wide":["January","February","March","April","May","June","July","August",
    		"September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
    		"Sep","Oct","Nov","Dec"]}}; /* // en_US locale reference */
    Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; /* // full day names */
    Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; /* // short day names */
    Calendar._FD = 1; /* // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc. */
    Calendar._MN = ["January","February","March","April","May","June","July","August",
    		"September","October","November","December"];/*  // full month names */
    Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; /* // short month names */
    Calendar._am = "AM"; /* // am/pm */
    Calendar._pm = "PM";
    /* // tooltips */
    
    Calendar._TT = {};
    Calendar._TT["INFO"] = "About the calendar";
    Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";
    Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
    Calendar._TT["GO_TODAY"] = "Go Today";
    Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)";
    Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)";
    Calendar._TT["SEL_DATE"] = "Select date";
    Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
    Calendar._TT["PART_TODAY"] = ' (' + "Today" + ')';
    /* // the following is to inform that "%s" is to be the first day of week */
    Calendar._TT["DAY_FIRST"] = "Display %s first";
    /* // This may be locale-dependent. It specifies the week-end days, as an array */
    
    /* // of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1 */
    
    /* // means Monday, etc. */
    Calendar._TT["WEEKEND"] = "0,6";
    Calendar._TT["CLOSE"] = "Close";
    Calendar._TT["TODAY"] = "Today";
    Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";
    /* // date formats */
    Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y";
    Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y";
    Calendar._TT["WK"] = "Week";
    Calendar._TT["TIME"] = "Time:";
}

//]]>
</script>
 

<script type="text/javascript">
Calendar.setup({
inputField : "issue_date",
ifFormat : "%e/%m/%y",
button : "issue_date_trig",
showsTime: false,
align : "Bl",
singleClick : true
});
 
</script>

